import React, { useState, useEffect, useImperativeHandle } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Select, message, Spin, InputNumber, Radio } from 'antd';
import request from '@/utils/request';
import styles from '../styles.less';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const formItemLayoutText = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

function AttrSpecAdd(props) {
  const { getFieldDecorator } = props.form;
  const [spinning, setSpinning] = useState(false);

  const [attrValueDataTypeList, setAttrValueDataType] = useState([]);
  const [AttrValueTypeList, setAttrValueTypeDataSource] = useState([]);

  useEffect(() => {
    getAttrValueDataTypeDataSource();
    getAttrValueTypeDataSource();
    if (props.attrSpecAddType === 'add') {
      props.form.setFieldsValue({
        statusCd: '1000',
        attrValueDataType: '1200',
        attrValueType: '1000',
      });
    } else if (props.attrSpecAddType === 'modify') {
      props.form.setFieldsValue({
        attrId: props.selectAttrSpec.attrId,
        attrNbr: props.selectAttrSpec.attrNbr,
        attrName: props.selectAttrSpec.attrName,
        defaultValue: props.selectAttrSpec.defaultValue,
        isNullable: props.selectAttrSpec.isNullable,
        valueFrom: props.selectAttrSpec.valueFrom,
        valueTo: props.selectAttrSpec.valueTo,
        attrValueDataType: props.selectAttrSpec.attrValueDataType || '1200',
        isDanyAttr: props.selectAttrSpec.isDanyAttr,
        attrValueType: props.selectAttrSpec.attrValueType || '1000',
        attrFormat: props.selectAttrSpec.attrFormat,
        attrLength: props.selectAttrSpec.attrLength,
        remark: props.selectAttrSpec.remark,
        statusCd: props.selectAttrSpec.statusCd || '1000',
      });
    }
  }, []);

  const getAttrValueDataTypeDataSource = () => {
    const res = [
      {
        name: '日期型',
        value: '1000',
      },
      {
        name: '日期时间型',
        value: '1100',
      },
      {
        name: '字符型',
        value: '1200',
      },
      {
        name: '浮点型',
        value: '1300',
      },
      {
        name: '整数型',
        value: '1400',
      },
      {
        name: '布尔型',
        value: '1500',
      },
      {
        name: '计算型',
        value: '1600',
      },
      {
        name: '不做约束',
        value: '1700',
      },
    ];
    setAttrValueDataType(res);
  };

  const getAttrValueTypeDataSource = () => {
    const res = [
      {
        name: '输入型',
        value: '1000',
      },
      {
        name: '枚举型',
        value: '2000',
      },
      {
        name: '只读型',
        value: '3000',
      },
      {
        name: '查询型',
        value: '4000',
      },
    ];
    setAttrValueTypeDataSource(res);
  };

  // 新增
  useImperativeHandle(props.cRef, () => ({
    handleAdd: () => {
      return new Promise(function(resolve) {
        props.form.validateFields((err, value) => {
          if (err) return;

          setSpinning(true);

          if (props.attrSpecAddType === 'add') {
            request('pmc/pms/attrSpec/add', { data: value }).then(res => {
              if (res && res.success === true) {
                setSpinning(false);
                message.success('新增成功');
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('新增失败');
                }
              }
            });
          } else if (props.attrSpecAddType === 'modify') {
            request('pmc/pms/attrSpec/update', { data: value }).then(res => {
              if (res && res.success === true) {
                setSpinning(false);
                message.success('修改成功');
                resolve(true);
              } else {
                setSpinning(false);
                if (res && res.errMessage) {
                  message.error(res.errMessage);
                } else {
                  message.error('修改失败');
                }
              }
            });
          }
        });
      });
    },
  }));

  return (
    <Spin spinning={spinning}>
      <Form>
        <Row>
          <Col span={12}>
            <Form.Item label="业务对象名称" {...formItemLayout}>
              {getFieldDecorator('busiObjName', { initialValue: props.selectBusiObj.busiObjName })(
                <Input maxLength={100} placeholder="请输入业务对象名称" disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="属性名称" {...formItemLayout}>
              {getFieldDecorator('attrName', {
                rules: [
                  {
                    required: true,
                    message: '属性名称不能为空',
                  },
                ],
              })(<Input maxLength={15} placeholder="请输入属性名称" />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="属性编码" {...formItemLayout}>
              {getFieldDecorator('attrNbr', {
                rules: [
                  {
                    required: true,
                    message: '属性编码不能为空',
                  },
                ],
              })(<Input maxLength={30} placeholder="请输入属性编码" />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="默认值" {...formItemLayout}>
              {getFieldDecorator('defaultValue')(
                <Input maxLength={10} placeholder="请输入默认值" />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="是否可空" {...formItemLayout}>
              {getFieldDecorator('isNullable', { initialValue: 1 })(
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="起始值" {...formItemLayout}>
              {getFieldDecorator('valueFrom')(<Input maxLength={10} placeholder="请输入起始值" />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="结束值" {...formItemLayout}>
              {getFieldDecorator('valueTo')(<Input maxLength={10} placeholder="请输入结束值" />)}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="属性值数据类型" {...formItemLayout}>
              {getFieldDecorator('attrValueDataType')(
                <Select style={{ width: '100%' }} showSearch allowClear>
                  {attrValueDataTypeList.length
                    ? attrValueDataTypeList.map(item => {
                        return (
                          <Select.Option value={item.value} key={item.value}>
                            {item.name}
                          </Select.Option>
                        );
                      })
                    : null}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="是否动态属性" {...formItemLayout}>
              {getFieldDecorator('isDanyAttr', { initialValue: 0 })(
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={12}>
            <Form.Item label="属性值分类" {...formItemLayout}>
              {getFieldDecorator('attrValueType')(
                <Select style={{ width: '100%' }} showSearch allowClear>
                  {AttrValueTypeList.length
                    ? AttrValueTypeList.map(item => {
                        return (
                          <Select.Option value={item.value} key={item.value}>
                            {item.name}
                          </Select.Option>
                        );
                      })
                    : null}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="属性格式" {...formItemLayout}>
              {getFieldDecorator('attrFormat')(
                <Input maxLength={500} placeholder="请输入属性格式" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="属性值长度" {...formItemLayout}>
              {getFieldDecorator('attrLength')(
                <InputNumber
                  className={`${styles['ant-input-number']}`}
                  min={1}
                  step={1}
                  defaultValue={1}
                  placeholder="请输入属性值长度"
                />
              )}
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Form.Item label="备注" {...formItemLayoutText}>
              {getFieldDecorator('remark')(
                <TextArea rows={5} maxLength={500} placeholder="请输入备注" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row style={{ display: 'none' }}>
          <Col span={1}>
            <Form.Item label="业务对象Id" {...formItemLayout}>
              {getFieldDecorator('busiObjId', { initialValue: props.selectBusiObj.busiObjId })(
                <Input disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row style={{ display: 'none' }}>
          <Col span={1}>
            <Form.Item label="属性规格Id" {...formItemLayout}>
              {getFieldDecorator('attrId', { initialValue: props.selectAttrSpec.attrId })(
                <Input disabled />
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Spin>
  );
}

export default connect(({ busiObjManage }) => ({
  selectBusiObj: busiObjManage.selectBusiObj,
  selectAttrSpec: busiObjManage.selectAttrSpec,
  attrSpecAddType: busiObjManage.attrSpecAddType,
}))(Form.create()(AttrSpecAdd));
